<template>
  <div class="floor-layout tpl-68">
    <div class="layout-main"
      :class="data.blockClass"
      :style="`padding-left:${data.blockStyle.pagePadding}px;
      padding-right:${data.blockStyle.pagePadding}px;
      margin-left:-${data.blockStyle.proPadding/2}px;
      margin-right:-${data.blockStyle.proPadding/2}px;`">
      <div v-for="(block, index) in data.blockList"
        v-if="!data.blockStyle.hideSellOut"
        class="layout_item_box"
        :key="index"
        :style="`padding:${data.blockStyle.proPadding/2}px;`">
        <layout-item
          :block="block"
          @handle-edit="handleEditBlock(index)">
          <template slot-scope="{ block }">
            <div v-if="block.block_value"
              class="goods_item"
              :style="`border-radius:${data.blockStyle.proRadius}px`">
              <div class="goods_pic">
                <div class="goods_pic_wrap" :style="`padding-top:${data.blockStyle.imgPercent}%;`">
                  <div class="goods_pic_img" :style="`background-image: url(${block.block_value.goods_image});`"></div>
                </div>
                <div v-if="data.blockStyle.showSold&&block.block_value.join_num" class="join_tag">{{block.block_value.join_num}}人已团</div>
                <div v-if="data.blockClass!=='row_three'" class="goods_tag">
                  <span v-if="data.blockClass==='row_one'||data.blockClass==='row_hybrid'" class="goods_tag_title">拼团</span>
                  <div v-if="data.blockStyle.showTime" class="goods_tag_countdown">
                    <span class="goods_tag_countdown_text">距结束</span>
                    <div class="goods_countdown">
                      <span class="goods_countdown_hour">00</span><span
                      class="goods_countdown_text">:</span><span
                      class="goods_countdown_minute">15</span><span
                      class="goods_countdown_text">:</span><span
                      class="goods_countdown_second">09</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="goods_info">
                <div class="goods_info_title" :style="`text-align:${data.blockStyle.textAlign};`">
                  <h3 v-if="data.blockStyle.showTitle" class="title" :style="`font-weight:${data.blockStyle.fontWeight};`"><span class="title_tag">{{ block.block_value.required_num }}人团</span> {{ block.block_value.goods_name }}</h3>
                  <p v-if="data.blockStyle.showDes" class="goods_info_des">{{ block.block_value.goods_des }}</p>
                </div>
                <div class="goods_info_title_expand" :style="`text-align:${data.blockStyle.textAlign};`"><span>仅剩{{block.block_value.last_num}}件</span></div>
                <div class="goods_info_price">
                  <div class="price_info" :style="`font-weight:${data.blockStyle.fontWeight};`">
                    <span v-if="data.blockStyle.showPrice" class="sale_price">
                      <div class="sale_price_view">
                        <span class="price_tag">¥</span>{{ block.block_value.goods_price | formatPrice }}
                      </div>
                    </span>
                    <span v-if="data.blockStyle.showOldPrice" class="sale-price__origin">¥{{ block.block_value.goods_old_price | formatPrice }}</span>
                  </div>
                  <div v-if="data.blockStyle.showBuyBtn" class="goods_buy_btn type-1"><i class="el-icon-shopping-cart-2" style="color: rgb(255, 68, 68);"></i></div>
                </div>
              </div>
            </div>
          </template>
        </layout-item>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  // import { Foundation } from '@/ui-utils'
  import request from '@/utils/request'
  import { api } from '~/ui-domain'

  const noImg = '';
  export default {
    name: 'tpl_68',
    mixins: [mixin],
    title: '团购',
    dataTpl: {
      tpl_id: 68,
      blockList: [
        {
          block_type: 'GOODS',
          block_value: {
            'time_left': 0,
            'goods_image': noImg,
            'goods_name': '此处显示商品名称',
            'goods_des': '此处显示商品描述，最多显示一行',
            'join_num': 5,
            'last_num': 20,
            'goods_price': 9.9,
            'reduce_moeny': 90,
            'required_num': 2
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'time_left': 0,
            'goods_image': noImg,
            'goods_name': '此处显示商品名称',
            'goods_des': '此处显示商品描述，最多显示一行',
            'join_num': 5,
            'last_num': 20,
            'goods_price': 9.9,
            'reduce_moeny': 90,
            'required_num': 2
          },
          block_opt: ''
        },
        {
          block_type: 'GOODS',
          block_value: {
            'time_left': 0,
            'goods_image': noImg,
            'goods_name': '此处显示商品名称',
            'goods_des': '此处显示商品描述，最多显示一行',
            'join_num': 5,
            'last_num': 20,
            'goods_price': 9.9,
            'reduce_moeny': 90,
            'required_num': 2
          },
          block_opt: ''
        }
      ],
      blockClass: 'row_two', // row_one, row_two, row_three, row_list, row_hybrid
      blockStyle: {
        proRadius: 4,
        imgPercent: 100,
        backFill: 'cover',
        fontWeight: 'normal',
        textAlign: 'left',
        pagePadding: 15,
        proPadding: 10,
        showTitle: true,
        showDes: true,
        showPrice: true,
        showOldPrice: false,
        showBuyBtn: true,
        showTime: true,
        showSold: true,
        hideSellOut: false
      }
    },
    filters: {
      formatPrice(price) {
        if (typeof price !== 'number') return price
        return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      }
    },
    computed: {
      /*
        * @date 2020-01-16
        * @author wolfMan
        * @description {对比商品数据是否改变}
      */
      list () {
        return JSON.stringify(this.data.blockList);
      }
    },
    methods: {
      async getGoodsList (_ids) {
        let _goodList = [];
        request({
          url: `${api.buyer}/pintuan/goods/skus/details`,
          method: 'post',
          loading: false,
          data: _ids,
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let _base = this.MixinClone(this.data.blockList);
          _base = _base.map(item => {
            let _value = res[item.block_value.id];
            let _detail = _value.goods_detail ? _value.goods_detail : {};
            item.block_value = {
              'id': _detail.goods_id,
              'time_left': _value.time_left,
              'goods_image': _detail.small,
              'goods_name': _detail.name,
              'goods_des': _detail.meta_description,
              'join_num': _value.sold_quantity,
              'last_num': _value.enable_quantity,
              'goods_price': _value.sales_price,
              'goods_old_price': _value.origin_price,
              'reduce_moeny': _value.origin_price - _value.sales_price,
              'required_num': _value.required_num
            };
            return item;
          });
          this.data.blockList = _base;
          this.$forceUpdate();
        });
      }
    },
    watch: {
      'data.blockList' (newVal) {
        if (newVal) {
          let _list = newVal;
          let _ids = [];
          if (!_list[0].block_value.id) {
            return;
          }
          _list.forEach(item => {
            _ids.push(item.block_value.id);
          });
          this.getGoodsList(_ids);
        }
      }
    }
  }
</script>